<template>
	<view>
		<uv-sticky>
			<view class="navbar">
		  <view
		    v-for="(item, index) in list"
		    :key="index"
		    class="nav-item"
		    :class="{ current: tabCurrentIndex == item.state }"
		    @click="tabClick(item, item.state)"
		  >
		    {{ item.name }}
		  </view>
		</view></uv-sticky>
		
		<view class="list" v-if="tabCurrentIndex==0" >
			<view class="box">
				<view class="title">{{ formData.indexNum}}</view>
				<view class="isShow">{{formData.startTime}}--{{formData.endTime}}</view>
				
			</view>
			<view class="butt" v-if="formData.status==0"  @click="gopath()">
				去履约
			</view>
			<view class="butt" v-if="formData.status==2"  @click="gopath()">
				违约
			</view>
		</view>
		<view class="list" v-if="tabCurrentIndex==1" v-for="(item, index) in formDataList">
			<view class="box">
				<view class="title">{{ item.indexNum}}</view>
				<view class="isShow">{{item.startTime}}--{{item.endTime}}</view>
			</view>
			<view class="butt" style="background-color: #53c21d;" v-if="item.status==1"  >
				已履约
			</view>
			<view class="butt" style="background-color: #f1a532;"  v-if="item.status==2" >
				违约
			</view>
		</view>
		
	</view>
</template>

<script>
import { getYouMiPetPeriodizationList, getPerformanceList,getPerformance} from '../../../utils/api.js';
export default {
	data() {
		return {
			formData:{},
			formDataList: [],
			info:{},
			list:[
				{name:'待履约',
				state:0},
				{name:'履约记录',
				state:1},
			],
			tabCurrentIndex: 0,
		};
	},
	onLoad(options) {
		this.info=JSON.parse(decodeURIComponent(options.info))
		console.log(this.info);
	},
	onShow() {
		this.getFormData();
	},
	methods: {
		tabClick(item, index) {
		  this.tabCurrentIndex = index;
		  if(index==0){
			  this.getFormData()
		  }else if(index==1){
			  this.getFormDataList()
		  }
		},
		getFormData() {
			let data = {
				fromDataId:this.info.id,
			};
			getPerformance(data).then(res => {
				if (res.code == 200) {
					this.formData = res.body;
					
						
					
				}
			});
		},
		getFormDataList() {
			let data = {
				fromDataId:this.info.id,
			};
			getPerformanceList(data).then(res => {
				if (res.code == 200) {
					this.formDataList = res.body;
				
						
					console.log(this.formDataList,'6666666');
				}
			});
		},
		gopath(item) {
			uni.switchTab({
				url:'/pages/category/category'
			})
		}
	}
};
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
	}
.list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 20rpx;
	font-size: 26rpx;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.title{
		font-size: 28rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}
	
}
.butt{
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #ff4544;
		color: #fff;
	}
	
	.navbar {
	  display: flex;
	  height: 40px;
	  padding: 0 5px;
	  background: #fff;
	  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	  position: relative;
	  z-index: 10;
	  .nav-item {
	    flex: 1;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100%;
	    font-size: 15px;
	    color: #303133;
	    position: relative;
	    &.current {
	      color: #ff633d;
	      &:after {
	        content: "";
	        position: absolute;
	        left: 50%;
	        bottom: 0;
	        transform: translateX(-50%);
	        width: 44px;
	        height: 0;
	        border-bottom: 2px solid #ff633d;
	      }
	    }
	  }
	}
</style>
